<template>
	<view class="container" style="background-color: white;">
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px'}" title="客户管理" @clickLeft="back">
			<block slot="right">
				<view class="city">
<uni-icons type="plus" size="25" color="white" style="padding-left: 12px;"
						@click="navTo('/pages/client/add')"></uni-icons>
				</view>
			</block>
		</uni-nav-bar>

		<!-- 搜索栏 -->
		<u-search v-model="search" :show-action="false" :animation="false" inputAlign="center" @change="loadmore"
			style="padding: 10px;">
		</u-search>
		<!-- 新增按钮 -->
		<!-- <view>
			<u-button class="u-add-client-btn" type="primary" @click="addClient">录入客户</u-button>
		</view> -->
		
		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- 列表 -->
		<scroll-view class="scroll-list" scroll-y="true">
			<view class="uni-contract-list" v-for="(client, index) in clientList" :key="index">
				<view class="uni-contract-list-cell" @click="clientClick(client)">
					<view class="uni-contract-list-body">
						<view class="uni-contract-list-item-content">
							<view class=""><text>{{client.company}}</text></view>
							<text class="uni-contract-list-item-content-step">
								<view>
									<span>{{client.person}}</span></p>
									<span>{{client.code}} {{format(client.createDate)}}</span>
								</view>
							</text>
						</view>
						<view class="uni-contract-list-item-extra"><text
								class="uni-contract-list-item-extra-text"><span>></span></text></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-action-sheet :actions="actions" @close="closeActionSheet" :show="showActionSheet" cancelText="取消"
			@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actions: [{
						name: '查看详情'
					},
				],
				showActionSheet: false,
				selectedclient: {},
				actionRoutes: {
					'查看详情': {
						url: '/pages/client/detail?id='
					},
				},
				curNow: 0,
				clientList: [],
				search: "",
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			closeActionSheet() {
				this.showActionSheet = false;
			},
			clientClick(client) {
				this.selectedclient = client;
				this.showActionSheet = true;
			},
			selectClick(index) {
				//跳转到具体页面
				var route = this.actionRoutes[index.name];
				if (route.url) {
					this.navTo(route.url + this.selectedclient.id);
				} else if (route.modal) {
					this[route.modal + ''] = !this[route.modal + ''];
				}
			},
			addClient() {
				this.navTo('/pages/client/add')
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				var this_ = this;
				
				var params = {
					params: {
						company: this.search,
						pageNum: 1,
						pageSize: 100
					}
				}
				this_.$u.api.client.list(params).then(res => {
					
					this_.clientList = res.rows;
				});
			},
			format(time) {
				return this.$moment(time).format('YYYY-MM-DD')
			}

		}
	}
</script>

<style lang="scss" scoped>
.toolbar {
	background-color: #fff;
}
.wrap .box .item{
	margin: 0 0 0px;
	border-radius: 0;
	.title {
		padding-left:0;
		.text {
			font-size: 30rpx;
			font-weight:500;
			margin: 0;
			color: #202328;
		}
	}
}
.grid {
	
	.grid-icon {
		color: #666;
	}
	
	.grid-text {
		font-size: 24rpx;
		padding: 15rpx;
		color: #202328;
	}
}


	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-contract-list-item-content-step {
		margin-top: 2px;
		color: #999;
		font-size: 13px;
		overflow: hidden;
		line-height: 18px;
	}

	.uni-contract-list-item-extra {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-contract-list-item-extra-text {
		color: #999;
		font-size: 18px;
	}

	.uni-contract-list-body {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 12px 15px;
		padding-left: 15px;
		flex: 1;
		overflow: hidden;
	}

	.uni-contract-list-item-content {
		display: flex;
		padding-right: 8px;
		flex: 1;
		color: #3b4144;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.uni-contract-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-contract-list-text-bottom {
		width: 100%;
		line-height: 28px;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}
	.u-add-client-btn {
		height: 30px;
		width: 90%;
		margin: 0px auto 8px auto;
	}
</style>
